<template>
	<view class="wrapper">
		<u-tabs-swiper ref="tabs" :current="current" active-color="#F70000" @change="tabsChange" :list="list" :is-scroll="false"></u-tabs-swiper>
		
		<!-- 基本信息 -->
		<block v-if="current==0">
			<view class="detail">
				<view class="detail-li border-bot">
					<view class="detail-li-l">
						一口价：
					</view>
					<view class="detail-li-r">
						2222222元
					</view>
				</view>
				<view class="detail-li border-bot">
					<view class="detail-li-l">
						总库存：
					</view>
					<view class="detail-li-r">
						2222件
					</view>
				</view>
				<view class="detail-li">
					<view class="detail-li-l">
						30天销量：
					</view>
					<view class="detail-li-r">
						14件
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="detail-li border-bot">
					<view class="detail-li-l">
						商品状态
					</view>
				</view>
				<view class="detail-li border-bot">
					<view class="detail-li-l">
						销售状态（是否上架）：
					</view>
					<view class="detail-li-check">
						<!-- <span>上架</span> -->
						<u-switch @change="checkBtn" v-model="checked" size="35" active-color="#37C759"></u-switch>
					</view>
				</view>
				<view v-if="checked" class="detail-li">
					<view class="detail-li-l">
						上架时间：
					</view>
					<view class="detail-li-check">
						2020.03.05  12:00:00
					</view>
				</view>
			</view>
		</block>
		
		<!-- 商品规格 -->
		<view v-else-if="current==1" class="goods-sku">
			<view class="goods-sku-head">
				<view class="goods-sku-li">
					规格
				</view>
				<view class="goods-sku-li">
					价格
				</view>
				<view class="goods-sku-li">
					库存
				</view>
				<view class="goods-sku-li">
					操作
				</view>
			</view>
			<view class="goods-sku-body">
				<view v-for="(item,index) in skuList" :key="index" class="goods-sku-li-box" :class="index==(skuList.length-1)?'':'border-bot'">
					<view class="goods-sku-li ">
						低配
					</view>
					<view class="goods-sku-li">
						222222
					</view>
					<view class="goods-sku-li">
						100
					</view>
					<view @click="delBtn" class="goods-sku-li del">
						删除
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品属性 -->
		<view v-else-if="current==2" class="goods-attribute">
			<view class="add-attribute-box">
				<view class="add-attribute-li">
					<view class="add-attribute-li-l">
						品牌：
					</view>
					<input type="text" v-model="attribute.brand" placeholder="请输入规格名称" />
				</view>
				<view class="add-attribute-li">
					<view class="add-attribute-li-l">
						材质：
					</view>
					<input type="text" v-model="attribute.texture" placeholder="请输入规格名称" />
				</view>
				<view class="add-attribute-li" style="border: none;">
					<view class="add-attribute-li-l">
						功能：
					</view>
					<input type="text" v-model="attribute.function" placeholder="请输入规格名称" />
				</view>
				<view class="add-attribute-li" style="border: none;">
					<view class="add-attribute-li-l">
						年份：
					</view>
					<input type="number" v-model="attribute.year" placeholder="请输入规格名称" />
				</view>
				<view class="add-attribute-li" style="border: none;">
					<view class="add-attribute-li-l">
						风格：
					</view>
					<input type="text" v-model="attribute.style" placeholder="请输入规格名称" />
				</view>
			</view>
			<view @click="defineBtn" class="btn">
				确定
			</view>
		</view>
		
		
		<!-- 商品详情 -->
		<view v-else class="goods-detail">
			<view class="goods-detail-tip">
				<image src="../../static/images/xx.png" mode="aspectFill"></image>
				<view class="tip">
					提示：APP端商品详情仅供查看，编辑修改请上PC端进行。
				</view>
			</view>
			<view class="goods-detail-li border-bot">
				<view class="goods-detail-li-l">
					商品标题：
				</view>
				<view class="goods-detail-li-r">
					新款奥迪汽车
				</view>
			</view> 
			<view class="goods-detail-li border-bot">
				<view class="goods-detail-li-l">
					商品详情：
				</view>
			</view>
			<view class="goods-detail-li" v-html="content">
				
			</view>
		</view>
		<!-- 提示窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:'',
				num:Math.random(),
				id:0,
				list:[{
					name:'基本信息'
				},{
					name:'商品规格'
				},{
					name:'商品属性'
				},{
					name:'商品详情'
				}],
				current:0,
				checked:false,
				skuList:[1,23,45],
				attribute:{
					brand:'',//品牌
					texture:'',//材质
					function:'',//功能
					year:'',//年份
					style:'',//风格
				},
				content:'sad所所所所所所所所所所所'
			}
		},
		onLoad(e) {
			// this.id = e.id
			// this.id = 9
		},
		onShow(){
			this.imgUrl = this.api.imgUrl
			
		},
		methods: {
			// tab选项卡
			tabsChange(e){
				this.current = e
			},
			// 上架
			checkBtn(e){
				console.log(e)
			},
			// 删除
			delBtn(){
				
			},
			// 确定
			defineBtn(){
				console.log(this.attribute)
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	@import url('../../common/common.css');
	.wrapper {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		padding-bottom: 150upx;
		box-sizing: border-box;
		background: #F6F6F6;
	}
	.detail{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		.detail-li{
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15upx 0;
			
			.detail-li-l{
				font-size:30upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(0,0,0,1);
			}
			.detail-li-r{
				width:490upx;
				background:rgba(247,248,250,1);
				padding: 18upx 31upx;
				box-sizing: border-box;
			}
			// .detail-li-check-l{
			// 	width: ;
			// 	font-size:30upx;
			// 	font-family:PingFangSC;
			// 	font-weight:400;
			// 	color:rgba(0,0,0,1);
			// }
			.detail-li-check{
				// width:490upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 18upx 31upx;
				box-sizing: border-box;
				>span{
					padding-right: 40upx;
				}
			}
		}
		.border-bot{
			border-bottom: 1upx solid #EEEEEE;
		}
	}
	
	.goods-sku{
		width: 100%;
		border-top: 1upx solid #EEEEEE;
		.goods-sku-head{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			.goods-sku-li{
				width: 25%;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				font-size:28upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
		}
		.goods-sku-body{
			margin-top: 20upx;
			width: 100%;
			.goods-sku-li-box{
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #FFFFFF;
			}
			.goods-sku-li{
				width: 25%;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				font-size:24upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(102,102,102,1);
			}
			.border-bot{
				border-bottom: 1upx solid #EEEEEE;
			}
			.del{
				color: #F70000;
			}
		}
		
	}
	.goods-attribute{
		width: 100%;
		border-top: 1upx solid #EEEEEE;
		.add-attribute-box{
			width: 100%;
			margin-top: 20upx;
			background: #FFFFFF;
			.add-attribute-li{
				width:90%;
				height: 100upx;
				margin:0 auto;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom:1upx solid #EEEEEE;
				.add-attribute-li-l{
					width: 150upx;
					font-size:30upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(0,0,0,1);
				}
				>input{
					width:400upx;
					height:60upx;
					background:rgba(247,248,250,1);
					padding: 0 30upx;
				}
			}
		}
		.btn{
			width:400upx;
			height:80upx;
			margin: 150upx auto;
			background:rgba(247,0,0,1);
			box-shadow:0px 2upx 24upx 0px rgba(251,88,88,1);
			border-radius:40upx;
			text-align: center;
			line-height: 80upx;
			font-size:34upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
	.goods-detail{
		width: 100%;
		background: #FFFFFF;
		.goods-detail-tip{
			width:100%;
			height:60upx;
			background:rgba(255,250,240,1);
			display: flex;
			justify-content: center;
			align-items: center;
			>image{
				width: 28upx;
				height: 28upx;
			}
			.tip{
				margin-left: 14upx;
				font-size:24upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(102,102,102,1);
			}
		}
		.goods-detail-li{
			width: 90%;
			padding:15upx 0upx;
			margin: 0 auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.goods-detail-li-l{
				font-size:30upx;
				font-family:PingFangSC;
				font-weight:400;
				color:rgba(0,0,0,1);
			}
			.goods-detail-li-r{
				margin-left: 23upx;
				width:400upx;
				height:60upx;
				background:rgba(247,248,250,1);
				line-height: 60upx;
				padding:0 30upx;
				// box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.border-bot{
			border-bottom: 1upx solid #EEEEEE;
		}
	}
</style>
